import React, {useEffect, useMemo, useState} from 'react';
// componentDidMount componentDidUpdate componentWillUnmount
function App(props) {
    const [num,setNum] = useState(0);
    const [age,setAge] = useState(100)
    // console.log(222)
    // useMemo(()=>{
    //     // 相当于constructor,componentWillMount
    //     console.log("11111",document.querySelector("button"))
    // },[]);


    // 相当于componentDidMount与componentDidUpdate的结合体
    // useEffect(()=>{
    //     // 1- 挂载之后执行：componentDidMount
    //     // 2- 状态更新完之后会重新渲染，渲染完成之后执行：componentDidUpdate
    //     console.log("useEffect",document.querySelector("button").innerText);
    // })


    // 相当于componentDidMount
    // useEffect(()=>{
    //     console.log("useEffect",document.querySelector("button").innerText);
    // },[])


    // 第二个参数是一个数组，可以省略
    // 1- 如果省略数组，那么第一个参数（回调函数）会在挂载完成后以及更新渲染完成后执行。
    // 2- 如果数组设置为[]，那么第一个参数（回调函数）只会在挂载完成后执行。
    // 3- 如果数据设置为[num],那么挂载完成后执行，num发生改变后执行
    // 4- 如果数据设置为[num,age],那么挂载完成后执行，num或age发生改变后执行
    useEffect(()=>{
        console.log("useEffect",document.querySelector("button").innerText);
    },[age,num])

    return (
        <div>
            <button onClick={()=>{
                setNum(100);
            }}>num:{num}</button>

            <button onClick={()=>{
                setAge(99);
            }}>age:{age}</button>
        </div>
    );
}

export default App;